<template>
	<view class="myFarm">
		<view class="top">
			<view class="title df">
				<view class="text">
					<!-- {{topAreaData.plantName}} -->
				</view>
				<view class="icons df">
					<view class="icon" :class="type == 'photo' ? 'bacf' : ''" @click="type = 'photo'">
						<u-icon name="photo" color="#17CC77" size="26" class="uIcon"></u-icon>
					</view>
					<view class="icon" :class="type == 'camera' ? 'bacf' : ''" @click="type = 'camera'">
						<u-icon name="play-right" color="#17CC77" size="26"></u-icon>
					</view>
				</view>
			</view>
			<view class="image">
				<image v-if="type == 'photo'" class="com" :src="topAreaData.varietyPicUrl" mode=""></image>
				<video v-if="type == 'camera'" class="com"src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4" controls autoplay></video>
			</view>
			<view class="detail">
				<view class="com df" style="justify-content: space-between;">
					<view>
						<view class="tt">土地编号</view>
						<view class="num" style="display: inline-block;font-size: 24rpx;">：{{SubId}}</view>
					</view>
					<view>
						<view class="tt">品种：</view>
						<view style="display: inline-block;">{{topAreaData.variety}}</view>
					</view>
				</view>
				<view class="com df">
					<view class="tt">认养时间</view>
					<view class="num">：{{topAreaData.fosterTime}}</view>
				</view>
				<view class="com df">
					<view class="tt">状态</view>
					<view class="num">：{{topAreaData.state == 0 ? "待种植":topAreaData.state == 1 ? "待采收":"已采收" }}</view>
				</view>
				<view class="com df">
					<view class="tt">租金</view>
					<view class="num">：{{topAreaData.rent}}.00/年</view>
				</view>
			</view>
		</view>
		<view class="bottom">
			<!-- <view class="statistics">
				<view class="area df">
					<view class="com">
						<view class="tt">总面积</view>
						<view class="num">{{topAreaData.totalArea}}平方</view>
					</view>
					<view class="line"></view>
					<view class="com">
						<view class="tt">已种植</view>
						<view class="num">{{topAreaData.alreadyPlant}}平方</view>
					</view>
					<view class="line"></view>
					<view class="com">
						<view class="tt">未种植</view>
						<view class="num">{{topAreaData.notPlantArea}}平方</view>
					</view>
				</view>
			</view> -->
			<view class="tab df flex-warp">
				<navigator open-type="navigate" :url="`/pages/user/manageFarm?landMsgId=${landMsgId}&landId=${landId}&VarietyId=${VarietyId}`" hover-class="none">
					<view class="com df">
						<view class="yuan"></view>
						<view class="image">
							<image src="../../static/manage.png" mode="" class="image"></image>
						</view>
						<view class="text">
							管理农场
						</view>
					</view>
				</navigator>
				<navigator open-type="navigate" :url="'/pages/user/mailFruit?plantId='+topAreaData.plantId+'&img='+topAreaData.varietyPicUrl" hover-class="none">
					<view class="com df" v-if="topAreaData.state == 1">
						<view class="yuan"></view>
						<view class="image">
							<image src="../../static/package.png" mode="" class="image"></image>
						</view>
						<view class="text">邮寄果实</view>
					</view>
				</navigator>
				<!-- <navigator hover-class="none" open-type="navigate" :url='"/pages/user/myFarm?landId="+landId'> -->
					<view class="com df" v-if="topAreaData.state == 1" @click="jumpPlant">
						<view class="yuan"></view>
						<view class="image">
							<image src="../../static/plant.png" mode="" class="image"></image>
						</view>
						<view class="text">继续种植</view>
					</view>
				<!-- </navigator> -->
				<navigator hover-class="none" open-type="navigate" :url="`/pages/user/addTask?landId=${landId}&landMsgId=${landMsgId}&VarietyId=${VarietyId}`">
					<view class="com df" v-if="topAreaData.state == 0">
						<view class="yuan"></view>
						<view class="image">
							<image src="../../static/recovery.png" mode="" class="image"></image>
						</view>
						<view class="text">完成采收</view>
					</view>
				</navigator>
				<navigator hover-class="none" open-type="navigate" :url="'/pages/user/weather?landId='+landId">
					<view class="com df">
						<view class="yuan"></view>
						<view class="image">
							<image src="../../static/qx.png" mode="" class="image"></image>
						</view>
						<view class="text">实时气象</view>
					</view>
				</navigator>
				<navigator hover-class="none" open-type="navigate" :url="'/pages/user/camera?landId='+landId">
				<view class="com df">
					<view class="yuan"></view>
					<view class="image">
						<image src="../../static/sxt.png" mode="" class="image"></image>
					</view>
					<view class="text">监控实况</view>
				</view>
				</navigator>
			</view>
			
			<view class="label">农场进度</view>
			<view v-if="stepList && stepList.length>=1">
				<view class="panel">
					<lwp-step v-for="(item, index) in stepList" :activity="item.done" :key="index" :index="index">
					    <view slot="content">
					      <view class="container">
							<view class="time">{{item.finishTime}}</view>
							<view class="content-container">
								<view class="title">
									<!-- <text class="title">{{ item.taskMsg.split(' ')[0] || ' ' }}</text> -->
								</view>
								<view class="content">{{ item.taskMsg || ' ' }}</view>
							</view>
					      </view>
					    </view>
					  </lwp-step>
				</view>
				<view class="bottom-button" @click="checkMore">{{stepList.length >= topAreaData.taskMsg.total ? "没有更多了":"查看更多"}}</view>
			</view>
			<view v-else>
				<u--text  bold align="center" type="info" text="暂时还没有农场进度信息"></u--text>
			</view>
		</view>
	</view>
</template>

<script>
	import {findPlantDetailByPlantId} from "@/api/api.js"
	export default {
		data() {
			return {
				type: 'photo',
				status:'已成熟',
				plantStatus:'已采收',
				topAreaData:{
					code:'42342355555',
					time:'2022-09-09 13:33:22',
					category:"苹果",
					status:'待种植',
					borrowPrice:'400'
				},
				areaList: [{
						name: '3平方'
					},
					{
						name: '5平方'
					},
					{
						name: '10平方'
					},
				],
				 stepList: [
				  //       {
						// 	finishTime: '2020-07-21 13:33:22',
						// 	taskMsg:'操作员 (操作测试13586565)完成了整地操作'
				  //       },
				  //       {
				  //       	finishTime: '2020-07-21 13:33:22',
				  //       	taskMsg:'操作员 (操作测试13586565)完成了整地操作'
				  //       },
						// {
						// 	finishTime: '2020-07-21 13:33:22',
						// 	taskMsg:'您下发了整地任务'
						// },
				],
				landId:"",
				landMsgId:'',
				VarietyId:'',
				pageNum:1,
				pageSize:3,
			}
		},
		onLoad(option) {
			console.log(option);
			this.landId = option.landId
			this.landMsgId = option.landMsgId
			this.VarietyId = option.VarietyId
		},
		onShow() {
			console.log("页面展示了");
			this.getData()
		},
		computed:{
			SubId(){
				return new String(this.topAreaData.plantId).substring(0,20)
			},
		},
		methods:{
			async checkMore(){
				uni.showLoading({
					mask:true,
					title:''
				})
				if(this.stepList.length >= this.topAreaData.taskMsg.total){
					uni.$u.toast('没有更多进度了')
					return
				}
				this.pageNum++
				let query = `plantId=${this.landId}&landMsgId=${this.landMsgId}&pageNum=${this.pageNum}&pageSize=${this.pageSize}`
				const res = await findPlantDetailByPlantId(query)
				if(res?.data.code == 200){
					let taskList = res.data.data.taskMsg.rows
					this.stepList = this.stepList.concat(...taskList)
					uni.hideLoading()
				}else{
					uni.$u.toast("获取更多农场进度失败")
				}
			},
			jumpPlant(){
				uni.navigateTo({
					url:"/pages/user/farm?plantId="+this.landId+'&landMsgId='+this.landMsgId
				})
			},
			async getData(){
				let query = `plantId=${this.landId}&landMsgId=${this.landMsgId}&pageNum=${this.pageNum}&pageSize=${this.pageSize}`
				const res = await findPlantDetailByPlantId(query)
				console.log(res);
				this.stepList = []
				if(res?.data.code == 200){
					this.topAreaData = res.data.data
					// let taskMsgList = this.topAreaData.taskMsg
					this.stepList = this.topAreaData.taskMsg?.rows
				}else{
					uni.$u.toast("获取农场进度失败")
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.myFarm {
		.df {
			display: flex;
		}
		.flex-warp{
			flex-wrap: wrap;
		}
		.top {
			width: 690rpx;
			// height: 108rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.12);
			border-radius: 0rpx 0rpx 36rpx 36rpx;
			padding: 20rpx 30rpx 30rpx;
			border-top: 1px solid rgba(0, 0, 0, 0.12);

			.title {
				font-size: 30rpx;
				color: #1d1d1d;
				font-weight: bold;
				justify-content: space-between;
				margin-bottom: 20rpx;

				.text {
					height: 68rpx;
					line-height: 68rpx;
				}

				.icons {
					// width: 212rpx;
					// height: 56rpx;
					background: #EFEFEF;
					border-radius: 11rpx;
					padding: 4rpx;

					.icon {
						// width: 102rpx;
						// height: 56rpx;
						border-radius: 11rpx;
						padding: 5rpx 28rpx;
					}

					.bacf {
						background: #FFFFFF;
					}
				}
			}

			.image {
				width: 690rpx;
				height: 374rpx;
				border-radius: 20rpx;
				overflow: hidden;

				.com {
					width: 690rpx;
					height: 374rpx;
				}
			}

			.detail {
				margin-top: 30rpx;

				.com {
					font-size: 26rpx;
					margin-top: 25rpx;

					.tt {
						display: inline-block;
						width: 130rpx;
						text-align: justify;
						text-align-last: justify;
						color: rgba(68, 78, 104, 0.7);
					}

					.num {
						color: #1d1d1d;
					}
				}
			}
		}

		.bottom {
			padding: 20rpx 30rpx 40rpx;

			.statistics {
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(0, 0, 0, 0.04);
				margin-bottom: 20rpx;

				.area {
					padding: 30rpx 0;
					border-bottom: 1rpx solid rgba(0, 0, 0, 0.12);

					.com {
						width: 229rpx;
						color: #1D1D1D;

						.tt {
							text-align: center;
							font-size: 26rpx;
							margin-bottom: 32rpx;
						}

						.num {
							font-size: 30rpx;
							font-weight: bold;
							text-align: center;
						}
					}

					.line {
						margin-top: 10rpx;
						height: 88rpx;
						width: 1rpx;
						background: rgba(0, 0, 0, 0.12);
					}
				}

				.check {
					padding: 30rpx 20rpx;

					.tt {
						font-size: 30rpx;
						font-weight: bold;
						color: #17cc77;
						margin-bottom: 46rpx;
						text-align: center;
					}

					.typeT {
						font-size: 28rpx;
						font-weight: bold;
						color: #1D1D1D;
						margin-bottom: 34rpx;
					}

					.type {
						justify-content: space-between;
						flex-wrap: wrap;
						margin-bottom: 44rpx;

						.vfor {
							width: 188rpx;
							height: 66rpx;
							background: #F3F5F4;
							border-radius: 8rpx;
							line-height: 66rpx;
							text-align: center;
							font-size: 28rpx;
						}

						.active {
							background: #17CC77;
							color: #FFFFFF;
						}
					}
				}

				.btn {
					width: 280rpx;
					height: 84rpx;
					background: #1BC46D;
					box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(27, 196, 109, 0.4);
					border-radius: 12rpx;
					line-height: 84rpx;
					text-align: center;
					color: #FFFFFF;
					font-size: 32rpx;
					margin: auto;
				}
			}

			.tab {
				justify-content: space-between;
				
				.com {
					box-sizing: border-box;
					width: 328rpx;
					height: 148rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(0, 0, 0, 0.04);
					padding: 10rpx;
					margin: 10rpx 0;
					position: relative;
					overflow: hidden;

					.yuan {
						width: 116rpx;
						height: 120rpx;
						background: #17CC77;
						opacity: 0.1;
						border-radius: 50%;
						position: absolute;
						top: 48rpx;
						left: -20rpx;
					}

					.image {
						width: 108rpx;
						height: 108rpx;
						margin-right: 22rpx;
					}

					.text {
						font-size: 30rpx;
						font-weight: bold;
						color: #1d1d1d;
						line-height: 108rpx;
					}
				}
			}
		}
		.label{
			font-weight: 600;
			margin:20rpx 0;
		}
		.panel{
			background-color: #FFFFFF;
			padding: 20rpx;
			.container{
				.time{
					font-size: 27rpx;
					color: #9f9f9f;
					margin: 10rpx 0;
				}
				.content-container{
					padding: 20rpx 20rpx;
					border-radius: 12rpx;
					background-color: #f5f5f5;
					.title{
						font-size: 28rpx;
					}
					.content{
						margin-top: 10rpx;
						font-weight: 600;
						font-size: 30rpx;
					}
				}
			}
		}
		.bottom-button{
			background-color: #FFFFFF;
				border-top: 2rpx solid #f3f3f3;
				text-align: center;
				line-height: 80rpx;
				font-size: 28rpx;
				color: #17CC77;
			}
	}
</style>